%input-global {
  display: inline-block;
  min-width: $font-size-base * 5;
  margin: 0;
  border: 1px solid $color-border;
  border-radius: 0;
  background-color: $color-white;
  color: $color-text-aux;
  font-size: $font-size-base;
  transition: $transition;
  -webkit-appearance: none;
  outline: none;

  &::placeholder {
    color: $color-placeholder;
  }

  &:hover {
    // border-color: darken($color-border, 10%);
    border-color: $color-text;
  }

  &:focus {
    outline: none;
    // border-color: $color-primary;
    // box-shadow: 0 0 0 3px rgba($color-primary, .25);
  }

  &[readonly] {
    background-color: mix($color-white, $color-border, 10%);
  }

  &:disabled,
  &[disabled] {
    background-color: mix($color-white, $color-border, 5%);
    border-color: darken($color-border, 10%);
    cursor: not-allowed;
  }
}

%input {
  height: $input-height;
  padding: $font-size-base / 2;
  line-height: ($input-height - $font-size-base - 2) / $font-size-base;

  @extend %input-global;
}

%textarea {
  height: $textarea-height;
  padding: $font-size-base / 2 $font-size-base;
  line-height: 1.5;
  vertical-align: bottom;

  @extend %input-global;
}